<template>
  <div class="container">
    <div class="search-bar">
      <img src="/static/images/search.png"/>
      <input v-model="ID" :focus="true" confirm-type="search" :placeholder="placeholder" @confirm="search" @input="handleInput"/>
    </div>
    <button @click="handleClick" :loading="loading" v-show="searched" hover-class="clicked">{{buttonText}}</button>
  </div>
</template>

<script>
// 该页面用于：1. 搜索用户>发起会话
import { mapState,mapGetters } from 'vuex'
import { getUserProfile } from '../../utils/index'
export default {
  data () {
    return {
      type: '', // user / group
      ID: '668',
      searchedID: '',
      searched: false,
      loading: false,
      buttonText: '',
      callType: '',
    }
  },
  onLoad (options) {
    console.warn('options',options)
    this.type = options.type
    if (this.type === 'user') {
      this.buttonText = '发起会话'
      wx.setNavigationBarTitle({ title: '发起会话' })
    }
  },
  onUnload () {
    this.ID = ''
    this.searched = false
    this.loading = false
    this.type = ''
  },
  computed: {
    ...mapState({
      groupList: state => state.group.groupList
    }),
    ...mapGetters(['myInfo']),
    placeholder () {
      if (this.type === 'user') {
        return '请输入userID'
      }
    }
  },
  methods: {
    handleInput () {
      if (this.searchedID === '' || this.ID !== this.searchedID) {
        this.searched = false
      }
    },
    search () {
      if (this.ID === '') {
        return
      }
      wx.showLoading({ title: '正在搜索' })
      if (this.type === 'user') {
        this.searchUser()
      }
    },
    searchUser () {
      wx.$app.getUserProfile({ userIDList: [this.ID] })
        .then(({ data }) => {
          wx.hideLoading()
          if (data.length === 0) {
            wx.showToast({ title: '未找到该用户', duration: 1000, icon: 'none' })
            return
          }
          this.searched = true
          this.searchedID = this.ID
        }).catch((error) => {
          wx.hideLoading()
          wx.showToast({ title: error.message, duration: 1000, icon: 'none' })
        })
    },

    handleClick () {
      if (this.type === 'user') {
        // this.createConversation()
        this.call(2)
      }
    },
    // 发起会话
    createConversation () {
      this.loading = true
      this.$store.dispatch('checkoutConversation', `C2C${this.ID}`)
        .then(() => {
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    call(type) {
      this.callType = type
      this.sendCalling()
    },
    async sendCalling () {
      console.warn('sendCalling>',this)
      let isFromGroup = false
      let userIDList = [this.myInfo.userID, this.ID]
      console.warn('sendCalling>',userIDList)

      const avatarList = await getUserProfile(userIDList)
      console.warn('avatarList--->', avatarList)
      this.$store.commit('setCalling', true)
      this.$store.commit('setCallData', {
        isFromGroup: isFromGroup,
        action: 'call',
        sponsor: this.myInfo.userID,
        to: this.ID,
        userIDList: [],
        avatarList: avatarList,
        inviteData: {
          callType: this.callType
        }
      })
      wx.switchTab({ url: '/pages/index/main' })
    },
  }
}
</script>

<style lang='stylus' scoped>
.container
  height 100vh
  padding 16px
  background-color $background
  .search-bar
    display flex
    align-items center
    background-color $white
    border-radius 16px
    padding 5px 16px
    font-size 14px
    input
      width 100%
    img
      width 14px
      height 14px
      margin-right 10px
  button
    background-color $primary
    color $white
    width 80vw
    position absolute
    left 50%
    bottom 24px
    margin-left -40vw
  .clicked
    background-color $dark-primary
</style>
